<template>
    <div style="margin: 20px auto; width: 1000px;height: 350px;" >
        <div style="width: 400px; float:left;height: 600px">
            <img style="width: 350px;height: 350px" :src="imgurl+data.bussinessImgUrl" >
        </div>
        <div style="width: 590px;float: right;">

            <h2 class="p_text">{{data.productName}}</h2>
            <P class="p_text">价格:{{data.price}}元</P>
            <P class="p_text">分类:{{data.oneCategory}}-{{data.twoCategory}}</P>
            <p class="p_text">商品简介:{{data.descript}}</p>
        </div>
        <div style="width: 590px;float: right;height:50px;margin-top: 120px">

            <div style="height: 30px;   float: left;line-height: 10px"  class="p_text">数量:&nbsp;&nbsp;</div>
            <el-button style="  float: left;" size="small" @click="decrement()"
                               :disabled="count<= 0">-</el-button>
            <div  style=" width: 50px; text-align: center;height: 30px;  float: left;line-height: 30px">{{count}}</div>
            <el-button style="  float: left;" size="small" type="primary"
                       :disabled="count>= this.data.currentCnt"
                               @click="increment()">+</el-button>
            <P style="height: 30px; float: left;line-height: 30px">&nbsp;库存:{{data.currentCnt}}</P>
        </div>
        <el-button style="margin-left: 25px;  float: left;" size="medium" type="primary"
                   @click="buy()">购买</el-button>
        <el-button style="  float: left;" size="medium" type="primary"
                   @click="addshopcar()">加入购物车</el-button>
    </div>
</template>

<script>
    import {getToken} from "../../../utill/Token";
    import {getPro} from "../../../api/api";
    import {setShopCar} from "../../../api/api";

    export default {
        data() {
            return {
                imgurl: "http://localhost:8080/images/",
                test :{
                    productId: "",
                    productNum:"",
                    customerId: ""
                },
                data:{
                },
            count:0,
            }
        },
        created() {
            this.test.productId = getToken("productId")
            this.test.customerId = getToken("user_id");
            getPro(this.test).then(res =>{
                console.log(res.data.data)
                this.data = res.data.data ;
            })


        },
        computed: {

        },
        methods: {
            decrement(){
                this.count--;
            },
            increment(){
                this.count++;
            },
            addshopcar(){
                this.test.productNum=this.count;
                console.log(this.test);
                setShopCar(this.test).then(res =>{
                    console.log(res.data.data)
                    this.$message({
                        message: '加入购物车成功',
                        type: 'success'
                    });
                    this.count=0;
                })
            },
            buy(){
                this.$message({
                    message: '购买成功',
                    type: 'success'
                });
            }
        }
    }

</script>

<style scoped>
    .p_text{
        margin-top: 10px;
        margin-left: 20px;
        letter-spacing:1px;
    }

</style>
